<template>
    <div class="main">
        <div class="new-wrap">
            <!--<search @result-click="resultClick"
                    @on-change="getResult"
                    :results="results"
                    v-model="DeptName"
                    position="absolute"
                    auto-scroll-to-top
                    top="46px"
                    :cancel-text="'搜索'"
                    @on-focus="onFocus"
                    @on-cancel="onCancel"
                    ref="search"></search>-->
            <input class="newinput"
                   v-model="DeptName"
                   type="text"
                   @change="changemsg">

            <div class="search"
                 @click="showlistmsg()">
                <x-icon type="ios-search"
                        class="searchicon"
                        size=16></x-icon>
            </div>
        </div>
        <div class="newposition">

            <vue-better-scroll class="wrapper"
                               ref="scrollqq"
                               :scrollbar="scrollbarObj"
                               :pullDownRefresh="pullDownRefreshObj"
                               :pullUpLoad="pullUpLoadObj"
                               :startY="parseInt(startY)"
                               @pullingUp="onPullingUp">
                <noData v-if="newshowLsit.length == 0"></noData>
                <div v-for="(item,index) in newshowLsit"
                     :key="index"
                     class="newlistposition"
                     @click="changeclick(item,index)">

                    <div class="newchange"
                         v-html="showlistchange(item)"></div>
                    <p>
                        <i class="iconfont checkbox"
                           :class="[checkList[index]?'icon-selected':'icon-checkbox-noselected']"></i>
                        <span v-html="shownewchange(item)"></span>
                    </p>
                </div>
            </vue-better-scroll>
            <!--<div  v-for="(item,index) in dataArr" @click="resultClick(item)" class="newdepetlidt" v-if="!listflag">
                  {{item.DeptName}}
             </div>-->
            <div class="btns">
                <button @click="tosavemsg">保存</button>
            </div>
        </div>
        <div>

        </div>
        <div class="weui-toast1"
             v-if="showloading">
            <i class="weui-loading1 weui-icon_toast1"></i>
            <p class="weui-toast__content weui-toast__content1">Loading</p>
        </div>
        <myMenu></myMenu>
    </div>

</template>

<script>
import { XHeader, Tabbar, TabbarItem, Group, Cell, Search } from 'vux'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
export default {
    name: 'App',
    data () {
        return {
            results: [],
            dataArr: [],
            DeptName: '',
            newshowLsit: [],
            listflag: false,
            checkList: [],
            parentId: [],
            parentName: '',
            newId: '',
            desc: [],
            showloading: false,
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            pageNum: 0,
            userId: '',
            tokenId: '',
            projectId: '',
            userInfo: ''

        }
    },
    components: {
        VueBetterScroll,
        Tabbar,
        TabbarItem,
        Group,
        Cell,
        XHeader,
        Search,
        myMenu
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        this.getData()
        this.DeptName = this.$route.query.DeptName
        this.onPullingUp()
    },
    methods: {
        getData () {
            let params = {
                'allowPaging': false,
                'business': 'FetchHiddenDangerStandards',
                'data': {
                    'ProjectId': this.projectId,
                    id: this.$store.state.hiddenlist.categoryId
                },
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                if (res.data.code === 0) {
                    // res.data.data.forEach(item => {
                    //     this.results.push({
                    //         title: item.DeptName,
                    //         id: item.DeptId
                    //     })
                    //     this.dataArr.push({
                    //         title: item.DeptName,
                    //         id: item.DeptId
                    //     })
                    // })

                    this.dataArr = res.data.data
                    console.log(this.dataArr)
                }
            }).catch(() => {

            })
        },
        setFocus () {
            this.$refs.search.setFocus()
        },
        resultClick (item) {
            localStorage.setItem('selectHideType', JSON.stringify(item))

            this.$store.state.hiddenlist = Object.assign({}, this.$store.state.hiddenlist, {
                'category': item.DeptName,
                'categoryId': item.DeptId
            })
            this.$router ? this.$router.back() : window.history.back()
        },
        getResult (val) {
            // console.log(val)
            // this.results = val ? this.resultFilter() : this.dataArr
            // console.log(this.results)
        },
        onFocus () {
            console.log('on focus')
        },
        onCancel () {
            this.showlistmsg()
        },
        resultFilter () {
            let res
            res = this.dataArr.filter(item => {
                return item.title.indexOf(this.DeptName) != -1
            })
            return res
        },
        showlistmsg () {
            this.showloading = true
            this.listflag = true
            let params = {
                'allowPaging': true,
                'business': 'FetchHiddenDangerStandardsForKey',
                'data': {
                    'CheckStandard': this.DeptName,
                    'ProjectId': this.projectId
                },
                'pageIndex': this.pageNum,
                'pageSize': 10,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(params).then((res) => {
                this.showloading = false
                this.newshowLsit = [...this.newshowLsit, ...res.data.data]
                this.$refs[`scrollqq`].forceUpdate(true)
            }).catch(() => {
                // this.onCancel();
                this.showloading = false
            })
        },
        changeclick (item, index) {
            if (!this.checkList[index]) {
                let flag = false
                let showflag = false
                this.parentId.forEach(
                    (itemlist, indexlist) => {
                        if (itemlist) {
                            flag = true
                            if (itemlist == item.ParentId) {
                                showflag = true
                                this.parentId[index] = item.ParentId
                            }
                        }
                    }
                )
                if (!flag) {
                    this.parentId[index] = item.ParentId
                } else {
                    if (!showflag) {
                        this.$vux.toast.text('请选择相同的类别')
                        return false
                    }
                }
            } else {
                this.parentId[index] = ''
            }
            this.checkList[index] = !this.checkList[index]
            this.$forceUpdate()
        },
        tosavemsg () {
            let flag = true
            this.parentId.forEach(
                (itemlist, indexlist) => {
                    if (itemlist) {
                        flag = false
                        this.newId = itemlist
                        this.parentName = this.newshowLsit[indexlist].ParentName
                        this.desc = [...this.desc, this.newshowLsit[indexlist].Desc]
                    }
                }
            )

            if (flag) {
                this.$vux.toast.text('请至少选择一个类别')
                return false
            }
            this.$store.state.hiddenlist = Object.assign({}, this.$store.state.hiddenlist, {
                'category': this.parentName,
                'categoryId': this.newId,
                'description': this.desc.join(',')
            })
            //  this.$router ? this.$router.back(-2) : window.history.back(-2)
            this.$router.push('/hideRegister')
        },
        selectmanage () { // 获取隐患类别
            let param = {
                'allowPaging': true,
                'business': 'GetFetchHiddenDangerStandardDetail',
                'data': this.desc.join(','),
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': 'A3944C2D655B11D684296E71CB81C9BD',
                'userId': '615123137'
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    if (res.data.code == 0) {
                        let msg = res.data.data.DeptDetail
                        this.$store.state.hiddenlist = Object.assign({}, this.$store.state.hiddenlist, {
                            'measure': msg
                        })
                        this.$router ? this.$router.back() : window.history.back()
                    }
                }
            )
        },
        showlistchange (item) {
            let a = new RegExp(this.DeptName)
            let c = item.ParentName.replace(a, `<span style="color:red">${this.DeptName}</span>`)
            let d = item.SecondCategoryName.replace(a, `<span style="color:red">${this.DeptName}</span>`)
            return `${c}>${d}`
        },
        shownewchange (item) {
            let a = new RegExp(this.DeptName)
            let c = item.Desc.replace(a, `<span style="color:red">${this.DeptName}</span>`)
            return `${c}`
        },
        onPullingDown () {
            console.log('xl')
        },
        onPullingUp () {
            console.log('sl')
            this.pageNum++
            this.showlistmsg()
        },
        changemsg () {
            this.pageNum = 0
            this.newshowLsit = []
        }
    },
    activated () {
        this.setFocus()
    }
}
</script>

<style scoped>
.weui-search-bar__label {
    line-height: 26px;
}
.newposition {
    position: fixed;
    top: 40px;
    width: 100%;
    left: 0;
    overflow: scroll;
    bottom: 100px;
    background-color: #fff;
}
.new-wrap {
    width: 100%;
    height: 40px;
    position: relative;
}
.newinput {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
    padding-right: 50px;
}
.search {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    width: 40px;
    text-align: center;
}
.searchicon {
    position: absolute;
    top: 6px;
    left: 4px;
}
.newlistposition {
    padding: 20px;
    border-bottom: 1px solid #ccc;
}
.newlistposition > p {
    line-height: 20px;
}
.newdepetlidt {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
}
.newchange {
    margin-bottom: 6px;
}
.weui-loading1 {
    animation-duration: 0.6s;
    animation-iteration-count: infinite;
    animation-name: vux-loading;
    animation-timing-function: linear;
    border-radius: 99em;
    border: 3px solid #ddd;
    border-left-color: #666;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-width: 2px;
    display: block;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 10px;
}
.weui-toast1 {
    position: fixed;
    z-index: 3;
    width: 7.6em;
    min-height: 7.6em;
    top: 48vw;
    left: 50%;
    margin-left: -3.8em;
    background: rgba(17, 17, 17, 0.7);
    text-align: center;
    border-radius: 1.333vw;
    color: #fff;
    content: 'viewport-units-buggyfill; top: 48vw; border-radius: 1.333vw';
}
.weui-toast__content1 {
    color: #fff;
}
.changecolor {
    color: red;
}
.btns {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    text-align: center;
    width: 100%;
}
@keyframes vux-loading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>
